<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>我要报名</title>
    <link rel="stylesheet" href="/js/plugin/layui/css/layui.css">
    <link rel="stylesheet" href="/js/plugin/mui/css/mui.min.css">
    <link rel="stylesheet" href="//at.alicdn.com/t/font_579508_b0ojnp7n81m.css">
    <link rel="stylesheet" href="/css/build/vote.css">
    <style>
        .mui-input-row label {
            font-size: 17px;
        }

        #btn-submit {
            float: none;
            width: auto;
            padding: 6px 12px;
        }

        .preview {
            padding: 10px;
        }

        .preview img {
            width: 150px;
            height: 150px;
        }
    </style>
</head>
<body>
<div class="vote-banner">
    <img src="http://12373036.s61i.faiusr.com/2/AD0IrJjzBRACGAAg3O2XywUosJCwoQcwgAU4rAI!640x640.jpg" alt="">
</div>

<div class="vote-title">
    <h2></h2>
    <!--<p class="vote-company">主办方：<span>阿比爸爸</span></p>-->
</div>
<div class="mui-input-group" style="margin: 10px 5px;">
    <div class="mui-input-row">
        <label for="nickName">昵称</label>
        <input type="text" name="nickName" id="nickName" placeholder="请输入昵称">
    </div>
</div>
<div class="mui-input-row" style="margin: 10px 5px;margin-bottom: 0;">
    <textarea id="applyBrief" rows="5" placeholder="请输入简介" style="margin-bottom: 0;"></textarea>
</div>

<div style="padding: 0 15px;margin-top: 10px;">
    <button type="button" class="mui-btn mui-btn-outlined" id="image" style="background: #fff;">上传图片</button>
    <div class="preview" id="preview">
        <!--<img src="http://localhost:8080/upload/1532246909274.jpg" alt="">-->
    </div>
</div>
<div style="text-align: center">
    <button type="button" class="mui-btn mui-btn-primary" id="btn-submit">确认提交</button>
</div>
<div class="vote-footer disabled" id="end" style="display: none;">
    已结束
</div>
<div class="note-info">
    <h3>活动时间</h3>
    <div id="time">
        <p>
            报名时间
        </p>
        <p>
            投票时间
        </p>
    </div>
    <h3>活动简介</h3>
    <div id="brief" class="article">

    </div>
    <h3>活动规则</h3>
    <div id="rules" class="article">

    </div>
</div>
</body>
<script src="/js/plugin/jquery-2.2.4.min.js"></script>
<script src="/js/plugin/template-web.js"></script>
<script src="/js/plugin/mui/js/mui.min.js"></script>
<script src="/js/plugin/layer/layer.js"></script>
<script src="/js/plugin/layui/layui.js"></script>
<script src="/js/smartAui.js"></script>
<script src="/js/smartAui.js"></script>
<script>
    layui.use(['upload', 'layer'], function () {
        var upload = layui.upload,
            layer = layui.layer;

        var account = smartAui.getUrlParam("account");
        var id = smartAui.getUrlParam("voteId");

        //单图
        upload.render({
            elem: '#image',
            url: '/managerImg/uploadFileImg',
            size: 5120,
            done: function (result, index, upload) {
                if (result.success && result.data) {
                    $("#preview").html("<img src='" + result.data + "'/>");
                } else {
                    layer.msg('上传失败');
                }
            }
        });
        //投票信息
        $.ajax({
            url: "/front/voteindex/getVoteInfo?account=" + account + "&id=" + id,
            type: "GET",
            success: function (result) {
//                 报名状态：0未开始 1已开始(可以报名) 2已结束
// 状态：0未发布 1已发布 2已结束
//                applyState： 报名状态
//                voteState：投票状态

                if (result.success && result.data) {
                    $(".vote-banner").html('<img src="' + result.data.poster + '" alt="">');
                    $(".vote-title").html('<h2>' + result.data.name + '</h2>');
                    $("#brief").html(result.data.brief);
                    $("#rules").html(result.data.rules);
                    $("#applyCount").html(result.data.applyCount ? result.data.applyCount : 0);
                    $("#voteCount").html(result.data.voteCount ? result.data.voteCount : 0);
                    $("#fansCount").html(result.data.fansCount ? result.data.fansCount : 0);

                    if (result.data.applyState==0) {
                        window.state = 0;
                        $("#end").text("未开始").show();
                        layer.alert("投票报名未开始", function () {
                        });
                    } else if (result.data.applyState==1) {

                    } else {
                        window.state = 2;
                        $("#end").show();
                        layer.alert("投票报名已结束", function () {
                        });
                    }
                    $("#time").html(
                        '<p>报名时间: ' + result.data.signUpStartTime + ' - ' + result.data.signUpEndTime + '</p>'
                        + '<p>投票时间: ' + result.data.voteStartTime + ' - ' + result.data.voteEndTime + '</p>'
                    );
                }
            }
        });


        $("#btn-submit").click(function () {
            var nickName = $("#nickName").val();
            var applyBrief = $("#applyBrief").val();
            var $img = $("#preview img");
            var applyImg = $img.attr("src");
            if (!nickName) {
                layer.msg("请填写昵称");
                return
            }
            if (!applyBrief) {
                layer.msg("请填写简介");
                return
            }
            if (!applyImg) {
                layer.msg("请上传图片");
                return
            }
            $.ajax({
                url: '/front/voteindex/voteApplySave',
                type: 'POST',
                dataType: 'json',
                data: {
                    "voteId":smartAui.getUrlParam("voteId") ,
                    "nickName": nickName,
                    "applyImg": applyImg,
                    "applyBrief": applyBrief
                },
                success: function (result) {
                    if (result.success) {
                        layer.alert("恭喜您,报名成功",function(){
                            history.go(-1);
                        });
                    } else {
                        layer.msg(result.msg || "报名失败");
                    }
                }
            })

        });

    });

</script>


</html>